<template>
  <el-dialog
    :visible.sync="visible"
    title="选择学习视频"
    :close-on-click-modal="false"
    @closed="closeCallback"
  >
    <template v-if="list.length > 0">
      <div v-loading="loading && visible" class="videos-list">
        <div
          v-for="(item, index) in list"
          :key="index"
          class="videos-list-item"
          :class="{
            selected: item.active
          }"
          @click="handleChooseVideo(item, index)"
        >
          {{ item.name }}
        </div>
      </div>
      <Pagination
        style="padding-bottom: 0; margin-top: 0;"
        :total="total"
        :limit="paginate.paginate"
        :page="paginate.page"
        @pagination="handlePagination"
      />
    </template>
    <template v-else>
      <el-empty description="还未上传学习视频，赶快上传吧！">
        <el-button type="text" @click="jumpToUploadVideos">前往上传</el-button>
      </el-empty>
    </template>
    <div slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Pagination from '@/components/Pagination/index.vue'
import { getVideos } from '@/api/train'

const MAX_CHOOSES_VIDEOS = 5
export default {
  name: '',
  components: { Pagination },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    selected: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      loading: false,
      list: [],
      paginate: {
        page: 1,
        paginate: 10
      },
      total: 0,
      chooseVideos: []
    }
  },
  computed: {
    visible: {
      get() {
        return this.value
      },
      set(e) {
        this.$emit('input', e)
      }
    }
  },
  watch: {
    value: {
      immediate: true,
      handler: function(n) {
        if (n) {
          this.getVideoList()
          this.setDefaultSelected()
        }
      }
    }

  },
  created() {
  },
  methods: {

    setDefaultSelected() {
      const f = new Set([...this.chooseVideos])
      this.selected.forEach(v => {
        if (!f.has(v)) this.chooseVideos.push(v)
      })
    },

    async getVideoList() {
      this.loading = true
      try {
        const res = await getVideos({ ...this.paginate, type: 'mp4' })
        console.log('res --------->', res)
        this.list = res.data.data.map(item => {
          return {
            id: item.id,
            name: item.name,
            path: item.path,
            cover: item.cover,
            active: this.setActive(item)
          }
        })
        this.total = res.data.total
      } catch (error) {
        this.$message.error('视频列表获取失败')
      } finally {
        this.loading = false
      }
    },

    setActive(item) {
      const index = this.chooseVideos.findIndex(v => v.path === item.path && v.name === item.name)
      return index !== -1
    },

    async handlePagination(e) {
      this.paginate.paginate = e.limit
      this.paginate.page = e.page
      await this.getVideoList()
    },

    handleChooseVideo(e) {
      const index = this.chooseVideos.findIndex(v => v.path === e.path && v.name === e.name)
      if (index !== -1) {
        e.active = !e.active
        this.chooseVideos.splice(index, 1)
        return
      }
      if (this.chooseVideos.length >= MAX_CHOOSES_VIDEOS) return this.$message.error(`最多可选择${MAX_CHOOSES_VIDEOS}个视频`)
      e.active = !e.active
      this.chooseVideos.push({ name: e.name, path: e.path, cover: e.cover, id: e.id })
    },

    jumpToUploadVideos() {
      this.$router.push({
        path: '/train/video'
      })
    },

    reset() {
      this.paginate = { page: 1, paginate: 10 }
      this.chooseVideos = []
    },

    close() {
      this.reset()
      this.$emit('input', false)
    },

    cancel() {
      this.reset()
      this.close()
    },

    confirm() {
      this.$emit('onConfirm', this.chooseVideos)
      this.reset()
      this.close()
    },

    closeCallback() {
      this.paginate = { page: 1, paginate: 10 }
      this.chooseVideos = []
    }
  }
}
</script>
<style lang="scss" scoped>
.videos-list {
  cursor: pointer;
  &-item {
    background-color: #f5f5f5;
    border-radius: 5px;
    margin: 10px 0;
    padding: 10px;
    //transition: all .5s;
  }
}
.selected {
  //transition: all .3s;
  color: #409EFF;
  border: 1px solid #409EFF;
  background: #D9ECFF;
}
</style>
